<template>
	<view>
		<Header title="云上坚果"  ></Header>
		
		<view class="main_wrap">
			<view class="main">
				<view class="main_header">
					<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="banner" :current="current"
						:mode="mode" :dots-styles="dotsStyles" field="content">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
							<swiper-item v-for="(item, index) in banner" :key="index">
								<view :class="item.colorClass" class="swiper-item">
									<image class="image" :src="this.baseURL+item.image" mode="aspectFill" :draggable="false"
										@click="onBanner(index)" />
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>

				</view>

				<view class="main_fabu">
					<van-row>
						<van-col span="6" custom-class="col6">
							<image src="../../static/logo.png" style="width: 128rpx;height: 128rpx;"></image>
							<view class="text">内容发布</view>
						</van-col>
						<van-col span="6" custom-class="col6">
							<image src="../../static/logo.png" style="width: 128rpx;height: 128rpx;"></image>
							<view class="text">内容发布</view>
						</van-col>
						<van-col span="6" custom-class="col6">
							<image src="../../static/logo.png" style="width: 128rpx;height: 128rpx;"></image>
							<view class="text">内容发布</view>
						</van-col>
						<van-col span="6" custom-class="col6">
							<image src="../../static/logo.png" style="width: 128rpx;height: 128rpx;"></image>
							<view class="text">内容发布</view>
						</van-col>
					</van-row>
				</view>
				<view class="main_jingxuan" v-for="(item,index) in articleType" :key="index">
					<view class="jingxuan_top" v-if="item.article.length >0">{{item.name}}</view>
					<view class="jingxuan_item_wrap" v-if="item.article.length>0" v-for="(i,inde) in item.article" :key="inde">
						<view class="jingxuan_item">
							<view class="item_left">
								<view class="jingxuan_img">
									<image style="width: 195rpx;height: 138rpx;" :src="this.baseURL + i.image"></image>
								</view>
								<view class="img_bot">
									栽培知识
								</view>
								
							</view>
							<view class="item_right">
								<view class="jingxuan_right_top">{{i.title}}</view>
								<view class="van-multi-ellipsis--l2 desc">
									{{i.content}}
								</view>
								<view class="item_bottom">
									<text class="author">作者: 张教授</text>
									<text>发布日期: {{i.createtime}}</text>
								</view>
							</view>
							
						</view>
					</view>
				
				</view>
				
				<!-- <view class="main_jingxuan">
					<view class="jingxuan_top">精选内容</view>
					<view class="jingxuan_item_wrap" v-for="item in 3">
						<view class="jingxuan_item">
							<view class="item_left">
								<view class="jingxuan_img">
									<image style="width: 195rpx;height: 138rpx;" src="../../static/logo.png"></image>
								</view>
								<view class="img_bot">
									栽培知识
								</view>
								
							</view>
							<view class="item_right">
								<view class="jingxuan_right_top">苗木的栽培过程需要注意哪些问题</view>
								<view class="van-multi-ellipsis--l2 desc">
									夏威夷果因根系浅,在苗木对环境条件抵抗力较弱,特别是干旱季节影响较大,要
								</view>
								<view class="item_bottom">
									<text class="author">作者: 张教授</text>
									<text>发布日期: 2021年7月25日</text>
								</view>
							</view>
							
						</view>
					</view>
				
				</view>
				 -->
						
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	import uniSwiperDot from "../../components/uni-swiper-dot.vue"
	import {getIndex} from "../../api/api.js"
	export default {
		data() {
			return {
				arr:[1,3,5,7],
				// info: [{
				// 		colorClass: 'uni-bg-red',
				// 		url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				// 		content: '内容 A'
				// 	},
				// 	{
				// 		colorClass: 'uni-bg-green',
				// 		url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				// 		content: '内容 B'
				// 	},
				// 	{
				// 		colorClass: 'uni-bg-blue',
				// 		url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				// 		content: '内容 C'
				// 	}
				// ],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'round',
				dotsStyles: {},
				swiperDotIndex: 0,
				// 轮播图
				banner:[],
				// 文章类型
				articleType:[]


			}
		},
		onLoad() {
			this.getHome()
		},
		components: {
			Header,
			"uni-swiper-dot": uniSwiperDot
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				console.log(1111)
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			},
			// 获取首页内容
			async getHome(){
				const {data} = await getIndex()
				console.log('res',data)
				
				this.banner = data.banner
				this.articleType = data.articleType
				
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-swiper__dots-item {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}
	
	/deep/ .van-nav-bar__content{
		background-color: #000000 !important;
	}

	/deep/ .col6 {
		text-align: center;
		height: 172rpx;
	}

	.main_wrap {
		padding: 10rpx 18rpx 88rpx 18rpx;
		// box-sizing: border-box;
		background-image: url("");

		.main {

			// border: 1px solid red;
			// height: 500rpx;
			.main_header {
				// height:770rpx !important;
				// width: 1440rpx !important;
				// width: 1440rpx;

				// border: 1px solid orange;
				// border-radius: 20rpx;




			}

			.main_fabu {
				border: 1px solid #fff;
				margin-top: 28rpx;
				border-radius: 15rpx;
				height: 240rpx;
				padding-top: 18rpx;

				.text {
					font-size: 24rpx;
				}
			}

			.main_jingxuan {
				border-radius: 15rpx;
				// height: 783rpx;
				border: 1px solid #bbbbbb;
				margin-top: 16rpx;
				background-color: #fff;
			

				.jingxuan_top {
					height: 86rpx;
					line-height: 86rpx;
					padding-left: 25rpx;
					background-color: #03bb7a;
					font-size: 30rpx;
					color: #fff;
					// border-radius: 15rpx 15rpx 0 0;
					font-weight: bold;
				}

				.jingxuan_item_wrap {
					padding: 20rpx 20rpx 20rpx 17rpx;
					background-color: #fff;
					// height: 224rpx;
					// border: 1px solid red;

					.jingxuan_item {
						display: flex;
						border-bottom: 1px solid #bbbbbb;
						padding-bottom: 14rpx;
						
						

						.img_bot {
							height: 38rpx;
							line-height: 38rpx;
							text-align: center;
							font-size: 24rpx;
							background-color: #e6e6e6;
							width: 130rpx;
							border-radius: 15rpx;
							font-weight: bold;
						}

						.item_right {
							margin-left: 16rpx;
							
							.item_bottom {
								// font-size: 10rpx !important;
								color: red;
								display: flex;
								margin-top: 50rpx;
								font-size: 24rpx !important;
							
								.author {
									margin-right: 50rpx;
									
								}
							}

							.jingxuan_right_top {
								font-size: 30rpx !important;
								font-weight: bold;

								.desc {
									font-size: 22rpx;
									color: red;
								}
							}

							
						}
					}
				}
			}
		}
	}


	@charset "UTF-8";

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.swiper-box {

		// height: 200px;
		height: 385rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// background-color: #999;
		color: #fff;

	}

	.image {
		// width: 750rpx;
		width: 720rpx;
		border-radius: 25rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */
	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		// background-color: #ff5a5f;
	}

	.uni-bg-green {
		// background-color: #09bb07;
	}

	.uni-bg-blue {
		// background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>
